<template>
  <div ref="k" class="el-card is-hover-shadow flex-1">
    <div class="k-title el-card__header">按日计算工具借还频率</div>
    <div ref="chartRef" style="width: 100%; height: 80%" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import dayjs from "dayjs";

// 图标数据额
const props = defineProps({
  data: { type: Array, default: () => [] },
  loading: {}
});
const list = computed(() => {
  const list = [...props.data];
  list.sort((a: any, b: any) => dayjs(a.time).diff(b.time));

  return list;
});
const xData = computed(() =>
  list.value.map((item: any) => dayjs(item.time).format("M/D"))
);
const yData1 = computed(() => list.value.map((item: any) => item.returnCount));
const yData2 = computed(() => list.value.map((item: any) => item.lendCount));

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});

const initData = () => {
  const h = parseFloat((14 / 1080) * window.innerHeight);

  setOptions({
    container: ".line-card",

    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["归还", "借出"],
      textStyle: {
        color: "#606266",
        fontSize: "0.875rem"
      },
      right: "5%",
      icon: "circle",
      itemWidth: h,
      itemHeight: h
    },
    xAxis: {
      data: xData.value,
      type: "category",
      boundaryGap: false
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    yAxis: {
      show: true,
      type: "value"
    },
    series: [
      {
        name: "借出",
        type: "line",
        stack: "Total",
        data: yData2.value,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#46C687"
        }
      },
      {
        name: "归还",
        type: "line",
        stack: "Total",
        symbol: "circle",
        data: yData1.value,
        symbolSize: 8,
        itemStyle: {
          color: "#1E77FF"
        }
      }
    ]
  });
};

defineExpose({ initData });
</script>
